<template>
    <div class="el-card__body">
    <!-- 搜索 -->
    <el-row style="padding: 2.083rem;">
      <el-col :span="12"
        ><div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input placeholder="根据编号搜索" v-model="params.keyword"></el-input>
            </el-form-item>
          </el-form></div
      ></el-col>
      <el-col :span="12"
        ><div style="padding-left: 20rem;">
          <el-row>
            <el-button @click="removeinput">清除</el-button>
            <el-button type="primary" @click="search" >搜索</el-button>
          </el-row>
        </div></el-col
      >
    </el-row>
    <!-- 数量 -->
    <el-alert :closable="false">数据共{{this.total}}条 </el-alert>
    <!-- 数据 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="编号" width="220"> </el-table-column>
      <el-table-column prop="questionType" label="题型" width="80">
        <template #default="{ row }">
          {{ QuestionType(row.questionType) }}
        </template>
      </el-table-column>
      <el-table-column label="题目编号" width="220">
        <template #default="{row}">
          <a v-for="(item,index) in row.questionIDs" :key="index" style="display:block; color:#0099ff" @click="hDetail(item.id)">{{item.number}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="addTime" label="录入时间" width="180">
      </el-table-column>
      <el-table-column prop="totalSeconds" label="答题时间" width="135">
      </el-table-column>
      <el-table-column prop="accuracyRate" label="正确率" width="133">
      </el-table-column>
      <el-table-column prop="userName" label="录入人" width="133">
      </el-table-column>
      <el-table-column prop="删除" label="操作" width="80">
        <template #default= "{ row }">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteRole(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
         @current-change="pageChange"
        @size-change="PageSizeChange"
      >
      </el-pagination>
    </div>
      <div class='container'>
    <!-- 弹框 -->
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
  <!-- 目录 -->
        <el-row style="  padding-bottom: 0.833rem;">
            <el-col :span="6"><div class="grid-content bg-purple">【题型】：{{QuestionType(detailist.questionType)}}</div></el-col>
           <el-col :span="6"><div class="grid-content bg-purple-light">【编号】：{{detailist.id}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">【难度】：{{Difficulty(detailist.difficulty)}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">【标签】：{{detailist.tags}}</div></el-col>
        </el-row>
        <el-row>
           <el-col :span="6"><div class="grid-content bg-purple">【学科】：{{detailist.subjectName}}</div></el-col>
           <el-col :span="6"><div class="grid-content bg-purple-light">【目录】：{{detailist.directoryName}}</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">【方向】：{{detailist.direction}}</div></el-col>
           <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <div slot="footer" class="dialog-footer"><el-button type="primary" @click="coless">关闭</el-button></div>
        <el-divider></el-divider>
        <!-- 题干 -->
        <p>【题干】：</p>
        <div style="color:blue" v-html="detailist.question">{{detailist.question}}</div>
        <!-- 单选 -->
         <div v-if="detailist.questionType==='1'">
           <p> <span>{{QuestionType(detailist.questionType)}}</span> 选项：（以下选中的选项为正确答案）</p>
           <el-radio-group v-model="radio" >
                <el-radio
                v-for="(item, index) in detailist.options"
                :key="index"
                :label="item.isRight"
                style="display:block; line-height: 2rem;   pointer-events: none;">{{item.title}}</el-radio>
            </el-radio-group>
         </div>
         <!-- 多选 -->
        <div  v-else-if="detailist.questionType==='2'">
          <p> <span>{{QuestionType(detailist.questionType)}}</span> 选项：（以下选中的选项为正确答案）</p>
          <el-checkbox-group v-model="checkList">
                <el-checkbox
                v-for="(item,index) in detailist.options"
                :key="index"
                :label="item.isRight"
                style="display:block; line-height: 2rem;  pointer-events: none;">{{item.title}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <!-- 简答 -->
        <el-row v-else>
                <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
        </el-row>
         <!-- 底部 -->
        <el-divider></el-divider>
        <p>【参考答案】：<el-button type="danger" @click="previews">视频答案预览</el-button></p>
        <div>
            <video autoplay controls="controls" :src="detailist.videoURL" style="  width: 16.667rem;
           height: 12.5rem;" v-if="videos" ></video>
        </div>
        <el-divider></el-divider>
        <div style="display: flex; align-items: center" class="grid-content bg-purple">
          <span>【答案解析】：</span>
          <span  v-html="detailist.answer" >{{detailist.answer}}</span>
        </div>
        <el-divider></el-divider>
        <p>【题目备注】：{{detailist.remarks}}</p>
    </el-dialog>
      </div>
  </div>
</template>
<script>
import { randoms, removeRandoms, Quedetail } from '@/api/hmmm/questions'
export default {
  data () {
    return {
      list: [],
      timer: null,
      dialogVisible: false,
      dialogTableVisible: false,
      total: 0,
      params: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      detailist: [],
      fromflag: {
        title: '',
        isRight: 0
      },
      videos: false,
      radio: 1,
      checkList: [1]
    }
  },
  mounted () {
    this.hRandoms()
  },
  methods: {
    // 调用接口渲染数据
    async hRandoms () {
      const res = await randoms(this.params)
      console.log(res)
      const { items, counts } = res.data
      this.list = items
      this.total = counts
    },
    // 题型转换
    QuestionType (type) {
      const map = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return map[type]
    },
    // 难度转换
    Difficulty (diff) {
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return map[diff]
    },
    // 清除搜索框
    removeinput () {
      this.params.keyword = ''
      this.hRandoms()
    },
    // 搜索
    async search () {
      const res = await randoms(this.params)
      const { items, counts } = res.data
      this.list = items
      this.total = counts
    },
    // 删除
    deleteRole (row) {
      // 1. 危险操作提示用户
      // 2. 调用接口
      // 3. 更新列表
      this.$confirm('确认删除此员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 接口调用
        await removeRandoms(row)
        this.hRandoms()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页
    pageChange (page) {
      this.params.page = page
      this.hRandoms()
    },
    PageSizeChange (pagesize) {
      this.params.pagesize = pagesize
      this.hRandoms()
    },
    // 题目编号弹框
    async hDetail (id) {
      this.dialogTableVisible = true
      const res = await Quedetail({ id })
      console.log(res)
      this.detailist = res.data
    },
    // 视频预览
    previews () {
      this.videos = !this.videos
    },
    coless () {
      this.dialogTableVisible = false
      this.videos = false
    }
  }
}
</script>
<style scoped>
.el-card__body {
  background-color: #fff;
  margin: 0 0.417rem;
}
</style>
